<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="home()">明星详情</el-breadcrumb-item>
                    <el-breadcrumb-item>{{star.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </admin-card>
        </admin-section>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="16">
                        <div class="table">
                            <h4>基本信息</h4>

                        <div class="editable">
                            <el-form
                                    label-position="right"
                                    label-width="94px"
                                    size="medium"
                                    :model="star"
                                    :rules="rules"
                                    ref="editor"
                            >
                                <el-form-item
                                    label="ID"
                                    prop="star_id"
                                    v-show="status === 'edit'"
                                    >
                                    {{star.star_id}}
                                </el-form-item>
                                <el-form-item
                                    label="名称"
                                    prop="name"
                                >
                                    <el-input v-model="star.name">

                                    </el-input>
                                </el-form-item>
                                <el-form-item
                                    label="昵称"
                                    prop="nick_name">
                                    <el-input v-model="star.nick_name">

                                    </el-input>
                                </el-form-item>
                                <el-form-item
                                    label="性别"
                                    prop="sex"
                                >
                                    <el-select
                                        v-model="star.sex">
                                        <el-option :key="0" :value="0" label="男"></el-option>
                                        <el-option :key="1" :value="1" label="女"></el-option>
                                        <el-option :key="2" :value="2" label="组合"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="状态"
                                    prop="enable">
                                        <el-switch v-model="star.enable"></el-switch>
                                </el-form-item>
                                <el-form-item
                                    label="头像"
                                    prop="avatar">
                                    <admin-file-upload
                                            zone="stars"
                                            v-model="star.background"
                                            @upload="onUploadAvatar">

                                    </admin-file-upload>
                                </el-form-item>
                                <el-form-item
                                    label="背景图"
                                    prop="background"
                                >
                                    <admin-file-upload
                                            zone="stars"
                                            v-model="star.background"
                                            @upload="onUploadBackground">

                                    </admin-file-upload>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="onSubmit" type="primary" :loading="loading">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <admin-device :custom="true">
                            <div class="bg" v-bind:style="bgStyle" @click="showBackImage">
                                <div class="avatar">
                                    <img v-img v-if="star.avatar.length > 0" :src="star.avatar" />
                                </div>
                            </div>
                            <img v-img :src="star.background" ref="bgimg" style="visibility: hidden" />
                        </admin-device>
                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {Vue,Component} from 'vue-property-decorator'
    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Api} from "@/api/stars";
    import AdminFileUpload from '@/views/controls/AdminFileUpload'
    import AdminDevice from '@/views/controls/AdminDevice'

    @Component({
        name:"AdminStarEditor",
        components: {
            AdminView,
            AdminCard,
            AdminSection,
            AdminFileUpload,
            AdminDevice,
        }
    })
    export default class AdminStarEditor extends Vue {

        status:string = "new";

        star:Api.Stars.StarInfoResponse = {
            star_id:"",
            name:"",
            nick_name:"",
            avatar:"",
            background:"",
            enable:true,
            sex:0
        };

        loading:boolean = false;

        bgStyle:any = {
            backgroundImage:"",
        };
        rules = {
            name: [{required:true, message: "请输入明星姓名"}],
            avatar:[{required:true, message: "请上传明星头像"}],
            background:[{required:true,message: "请上传明星背景图"}],
            sex:[{required:true, message: "请选择明星性别"}],
            enable:[{required:true,message:"请选择状态"}]
        };


        loadImages() {
            if(this.star.background.length > 0) {
                this.bgStyle.backgroundImage = `url(${this.star.background})`;
            }
        }

        showBackImage() {
            let ref:any = this.$refs['bgimg'];
            ref.click();
        }

        loadView() {

            let id = this.$route.params['id'];

            if(id === "new") {
                this.status = "new";
            }else{
                this.status = "edit";

                Api.Stars.GetStarInfo({star_id:id})
                    .then((ack) => {
                        this.star = ack;
                        this.loadImages();
                    })

            }

        }

        onUploadAvatar(url:string) {
            this.star.avatar = url;

            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {})

        }

        onUploadBackground(url:string) {
            this.star.background = url;
            this.bgStyle.backgroundImage = `url(${url})`;


            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {})
        }

        mounted() {
            this.loadView()
        }

        home() {
            return {
                path:`/stars/${this.star.star_id}`
            }
        }

        onSubmit() {

            let editor:any = this.$refs['editor'];


            editor.validate((valid:boolean) => {

                if(valid) {

                    if(this.status === "new") {
                        this.loading = true;

                        let s = this.star;

                        let data:Api.Stars.CreateStarRequest = {
                            name:s.name,
                            nick_name:s.nick_name,
                            avatar:s.avatar,
                            background:s.background,
                            sex:s.sex,
                            enable:s.enable,
                            describe:"",
                        };

                        Api.Stars.CreateStar(data)
                            .then((ack) => {
                                this.$message({
                                    type: "success",
                                    message: `创建成功[${ack.star_id}]`,
                                });

                                this.$router.push({
                                    path:`/stars/${ack.star_id}`
                                });

                                this.loading = false;
                            })
                            .catch(() => {
                                this.loading = false;
                            })
                    }else {
                        this.loading = true;

                        let s = this.star;

                        let data:Api.Stars.SetStarRequest = {
                            star_id:s.star_id,
                            name:s.name,
                            nick_name:s.nick_name,
                            avatar:s.avatar,
                            background:s.background,
                            sex:s.sex,
                            enable:s.enable,
                            describe:"",
                        };

                        Api.Stars.SetStar(data)
                            .then((ack) => {
                                this.$message({
                                    type: "success",
                                    message: `修改[${this.star.star_id}]成功`,
                                });

                                this.$router.push({
                                    path:`/stars/${this.star.star_id}`
                                });

                                this.loading = false;
                            })
                            .catch(() => {
                                this.loading = false;
                            })
                    }

                }
            })
        }

    }
</script>

<style lang="scss" scoped>

    .bg {
        width: 320px;
        height: 185px;

        background-repeat:no-repeat;
        background-size:100% 100%;
        -moz-background-size:100% 100%;

        display: flex;
        flex-direction: column-reverse;

        cursor: pointer;

        .avatar {
            padding: 10px;
            z-index: 1;
            img {
                position: relative;
                display: inline-block;
                width: 40px;
                height: 40px;
                /*圆形显示*/
                border-radius: 50%;
                /*圆形显示*/
                background: rgba(255, 255, 255, 0.1);
                vertical-align: center;
                border: 2px solid gray;
            }
        }

    }
</style>